<template>
	<view>
		<view class="navbar">
			<view class="navbar-fixed">
				<!-- 状态栏小程序撑起高度 -->
				<view :style="{ height: statusBarHeight + 'px' }"></view>
				<view class="navbar-content" :style="{ height: navBarHeight + 'px', width: windowWidth + 'px' }">
					<image src="@/static/navLeft.png" @click="back()"></image>
					<view class="navbar-search" v-if="showTitle">我的资料</view>
				</view>
			</view>
			<!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）indexOf-->
			<view :style="{ height: statusBarHeight + navBarHeight + 'px' }"></view>
			<view class="headImg">
				<image :src="from.wxPhotoURL"></image>
				<!-- <view class="btn">
					点击修改
				</view> -->
			</view>
		</view>

		<view class="box one">
			<view class="item">
				<view class="left">手机号</view>
				<view class="right">
					<input v-model="from.phoneNumber" placeholder="请输入手机号" />
				</view>
			</view>
			<!-- <view class="item" @click="showPopupNickname">
				<view class="left">昵称</view>
				<view class="right">
					<text>{{ from.wxName }}</text>
					<image src="@/static/right@2.png"></image>
				</view>
			</view> -->
		</view>

		<view class="box">
			<view class="item">
				<view class="left">姓名</view>
				<view class="right" @click="showPopupUsername">
					<text class="text1" v-if="!from.name">请输入真实姓名</text>
					<text class="text2" v-else>{{ from.name }}</text>
					<image src="@/static/right@2.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="left">身高</view>
				<view class="right">
					<input v-model="from.height" placeholder="请输入净身高" />
					<!-- <text class="text1" v-if="!from.height">请输入净身高</text>
					<text class="text2" v-else>{{ from.height }}</text>
					<image src="@/static/right@2.png"></image> -->
				</view>
			</view>
			<view class="item">
				<view class="left">学历</view>
				<view class="right">
					<picker :range="educationlist" range-key="item" @change="changeeducation">
						{{from.education?educationlist[from.education]:'请选择学历'}}
					</picker>
					<!-- <text class="text1" v-if="!from.height">请选择学历</text>
					<text class="text2" v-else>{{ from.height }}</text> -->
					<image src="@/static/right@2.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="left">性别</view>
				<view class="right" @click="showPopupSex">
					<!-- <text class="text1" v-if="!from.sex">请选择</text> -->
					<text class="text2">{{ sexList[from.sex] || '请选择' }}</text>
					<image src="@/static/right@2.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="left">出生日期</view>
				<view class="right" @click="openDate()">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{from.birthday?from.birthday:'请选择日期'}}</view>
					</picker>
				<!-- 	<text v-if="from.birthday== '' || from.birthday == '1970-01-01'" class="text1">请选择日期</text>
					<text v-else class="text2">{{ from.birthday || '请选择日期' }}</text> -->
					<image src="@/static/right@2.png"></image>
				</view>
			</view>
			<!-- <view class="item">
				<view class="left">所属家庭</view>
				<view class="right">
					<input type="text" disabled v-model="from.name" placeholder="请输入家庭名称" placeholder-class="placeClass">
				</view>
			</view> -->
			<!-- <view class="item">
				<view class="left">地址</view>
				<view class="right">
					<addresspicker class="selectbox" @change="hangleaddress">
						<view class="addbox">
							<view class="addtext">
								<view v-if="from.address.length > 0 && from.address[0]">
									{{ from.address[0] || '' }} {{ from.address[1] || '' }} {{ from.address[2] || '' }}
								</view>
								<view v-else>
									请选择地址
								</view>
							</view>
							<view class="imgbox">
								<image src="@/static/right@2.png"></image>
							</view>
						</view>
					</addresspicker>
				</view>
			</view> -->
		</view>



		<!-- 昵称弹出层 -->
		<uni-popup ref="nickname" type="dialog">
			<uni-popup-dialog mode="input" title="昵称" placeholder="限4-16个字符，一个汉字为2字符" @confirm="confirmNickname">
			</uni-popup-dialog>
		</uni-popup>

		<!-- 姓名弹框 -->
		<uni-popup ref="username" type="dialog">
			<uni-popup-dialog mode="input" title="昵称" placeholder="限4-16个字符，一个汉字为2字符" @confirm="confirmUsername">
			</uni-popup-dialog>
		</uni-popup>

		<!-- 性别选择 -->
		<uni-popup ref="sex" :safe-area="false">
			<view class="sex_box">
				<view class="title">
					<text></text>
					<text>选择性别</text>
					<image src="@/static/off.png" @click="closeSex"></image>
				</view>
				<view class="content">
					<picker-view @change="bindChangeSex" class="picker" indicator-class="pickerActive">
						<picker-view-column>
							<view class="picker_item" v-for="(item, index) in sexList" :key="index">{{ item }}</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="btn" @click="bindSex">确定</view>
			</view>
		</uni-popup>

		<!-- 时间选择 -->
		<uni-popup ref="date" :safe-area="false">
			<view class="sex_box">
				<view class="title">
					<text></text>
					<text>选择出生日期</text>
					<image @click="closedate" src="@/static/off.png"></image>
				</view>
				<view class="content">
					<picker-view indicator-class="pickerActive" :value="value" @change="bindChangeDate" class="picker">
						<picker-view-column>
							<view class="picker_item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker_item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker_item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="btn" @click="bindDate">确定</view>
			</view>
		</uni-popup>
		<view style="height: 116rpx;"></view>
		<view class="butbox">
			<view @click="sumbit()">提交</view>
		</view>

		<!-- 获取手机号 -->
		<view class="loginbox" v-if="mobileShow">
			<view class="logininfo">
				<view class="lohintitle">请先绑定手机号</view>
				<view class="loginbut">
					<view class="butone" @click="mobileShow = false">取消</view>
					<view class="buttwo">
						获取手机号
						<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import addresspicker from '../../uni_modules/hu-pickerAddress/components/hu-pickerAddress/hu-pickerAddress.vue'
	export default {
		components: {
			addresspicker
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1970; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				date: currentDate,
				statusBarHeight: 20,
				/* 状态栏高度 */
				navBarHeight: 45,
				/* 导航栏高度 */
				windowWidth: 375,
				/* 窗口宽度 */
				/* 设定状态栏默认高度 */
				showTitle: true,
				sexList: ["男", "女", ], //0保密1男2女
				// 计算时间选则器的变量
				years,
				year,
				months,
				month,
				days,
				day,
				// 数据
				nickname: "昵称",
				username: "",
				sex: "",
				sexCopy: "",
				date: "",
				family: "",
				mobileShow: false,
				from: {
					// address: {},
					// wxName: '',
					name: '',
					phoneNumber: '',
					wxPhotoURL: '',
					sex: null,
					birthday: '',
					height: '',
					education: null,

				},
				fd: true, //防抖
				educationlist: ['未知', '大专以下', '大专', '本科', '硕士研究生', '博士研究生'], //0.未知1.大专以下2大专3本科4.硕士研究生5.博士研究生
			};
		},
		onShow() {
			this.getnav()
		},
		onLoad() {
			this.getmyinfo()
		},
		onPageScroll(e) {
			// console.log(e.scrollTop);
			if (e.scrollTop > this.statusBarHeight + this.navBarHeight) {
				this.showTitle = false
			} else {
				this.showTitle = true
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				console.log(e,'e')
				this.from.birthday = e.detail.value
			},
			//绑定手机号
			getPhoneNumber(e) {
				// return
				this.$http({
					url: '/api/Wechat/bind_mobile',
					data: {
						code: e.detail.code,
					}
				}).then(res => {
					this.from.phoneNumber = res.data
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.mobileShow = false
					this.getmyinfo()
					// setTimeout(()=> that.onNavigateBack(),1000)
					// uni.switchTab({
					// 	url:'/pages/index/index'
					// })
				})
			},
			getmyinfo() {
				this.$http({
					url: '/api/Course/user_info',
				}).then(res => {
					this.from = res.data
					// this.from.address = res.data.address.split(',')
				})
			},
			bindPhone() {
				if (!this.from.phoneNumber) {
					this.mobileShow = true
				}
			},
			// 显示昵称弹框
			showPopupNickname() {
				this.$refs.nickname.open("center")
			},
			// 确认昵称回调
			confirmNickname(e) {
				this.from.wxName = e
			},
			// 显示姓名弹框
			showPopupUsername() {
				this.$refs.username.open("center")
			},
			// 确认姓名回调
			confirmUsername(e) {
				this.from.name = e
			},
			// 显示性别弹窗
			showPopupSex() {
				this.$refs.sex.open("bottom")
			},
			// 性別change事件
			bindChangeSex(e) {
				this.from.sex = e.detail.value[0]
				// console.log(e,123,this.from.sex,this.sexList[this.from.sex])
			},
			// 確定選擇性別
			bindSex() {
				// console.log(this.from.sex,123)
				// this.sex = this.sexCopy
				this.$refs.sex.close()
			},
			// 关闭性别选择
			closeSex() {
				this.$refs.sex.close()
			},
			// 打開生日选择弹框
			openDate() {
				this.$refs.date.open("bottom")
			},
			// 選額生日
			bindChangeDate(e) {
				let val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
				console.log(e.detail.value)
			},
			// 确认生日
			bindDate() {
				this.from.birthday = `${this.year}-${this.month}-${this.day}`
				// console.log(this.from.birthday,'this.from.birthday')
				this.$refs.date.close()
			},
			closedate() {
				this.$refs.date.close()
			},
			getnav() {
				// 获取手机系统信息
				const info = uni.getSystemInfoSync()
				// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
				this.statusBarHeight = info.statusBarHeight
				this.windowWidth = info.windowWidth
				// 除了h5 app mp-alipay的情况下执行
				// #ifndef H5 || APP-PLUS || MP-ALIPAY
				// 获取胶囊的位置
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				console.log(menuButtonInfo);
				// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
				this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
					.statusBarHeight)
				this.windowWidth = menuButtonInfo.left
				// #endif
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			hangleaddress(e) {
				this.from.address = []
				this.from.address = e.data
			},
			changeeducation(e) {
				console.log(e, 'e')
				this.from.education = e.detail.value
			},
			async sumbit() {
				console.log(this.from.phoneNumber, this.from.name, this.from.birthday, this.from.education,
					'this.from')
				if (!this.from.phoneNumber || !this.from.name || !this.from.birthday || !this.from.education || !this
					.from.height) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}
				if (this.from.phoneNumber.length !=11) {
					uni.showToast({
						title: '手机号填写错误',
						icon: 'none'
					})
					return
				}
				if (this.from.sex == null) {
					uni.showToast({
						title: '请选择性别',
						icon: 'none'
					})
					return
				}
				// if (this.from.address.length == 0) {
				// 	uni.showToast({
				// 		title: '请选择地址',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// this.from.address = this.from.address.join(',')
				if (this.fd) {
					this.fd = false
					try {
						await this.$http({
							url: '/api/Wechat/edit_user',
							data: this.from
						}).then(res => {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						})
					} catch (err) {

					} finally {
						this.fd = true
					}
				}

			}
		}
	}
</script>
<style>
	.placeClass {
		font-size: 32rpx !important;
		font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular !important;
		font-weight: normal !important;
		color: #888888 !important;
	}
</style>
<style lang="scss" scoped>
	.loginbox {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		z-index: 99;
		top: 0;

		// left: 0rpx;
		.logininfo {
			// position: fixed;
			width: 560rpx;
			margin: auto;
			height: 250rpx;
			background-color: #ffffff;
			padding: 60rpx 50rpx 10rpx 50rpx;
			margin-top: 552rpx;
			border-radius: 20rpx;

			.lohintitle {
				width: 360rpx;
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				margin: auto;
				margin-bottom: 60rpx;
				text-align: center;
			}

			.loginbut {
				display: flex;
				justify-content: space-around;

				.butone {
					width: 190rpx;
					padding: 0 30rpx;
					height: 86rpx;
					line-height: 86rpx;
					text-align: center;
					border: 2rpx solid #FF8A9B;
					border-radius: 43rpx;
					font-size: 34rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FF8A9B;
				}

				.buttwo {
					position: relative;
					padding: 0 30rpx;
					width: 190rpx;
					height: 86rpx;
					line-height: 86rpx;
					text-align: center;
					background: linear-gradient(180deg, #FF8A9B 0%, #FF8A9B 100%);
					border-radius: 43rpx;
					font-size: 34rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #fff;

					>button {
						position: absolute;
						opacity: 0;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	::v-deep .uni-dialog-title-text {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #222222;
		background: linear-gradient(#fff 0%, #fff 70%, #FFE6EB 70%, #FFE6EB 100%);

	}

	::v-deep .uni-border-left {
		background: #FF8A9B;

	}

	::v-deep .uni-button-color {
		color: #fff;
	}

	.navbar {
		width: 750rpx;
		height: 464rpx;
		background: #FFE1E5;
		position: relative;

		.navbar-fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 399;
			width: 100%;
			background: transparent;


			.navbar-content {
				display: flex;
				align-items: center;
				padding: 0rpx 30rpx;
				box-sizing: border-box;

				image {
					width: 19rpx;
					height: 35rpx;
					margin-right: 34rpx;
				}

				.navbar-search {
					display: flex;
					align-items: center;
					font-size: 36rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;

					// position: absolute;
					image {
						width: 18rpx;
						height: 33rpx;
					}

					// left: 50%;
					// transform: translate(-50%, 0);
				}
			}
		}

		.headImg {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 30rpx 0;

			image {
				width: 126rpx;
				height: 126rpx;
				border-radius: 50%;
				border: 4rpx solid #FFFFFF;

			}

			.btn {
				padding: 10rpx 22rpx;
				background: rgba(0, 0, 0, .5);
				border-radius: 42rpx;
				font-size: 24rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 1em;
			}
		}
	}

	// 
	.one {
		position: relative;
		top: -50rpx;
	}

	.box {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;

		& .item:last-child {
			border: none;
		}

		.item {
			width: 100%;
			height: 112rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #EFEFEF;
			font-size: 32rpx;
			font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
			font-weight: normal;
			color: #222222;

			.left {
				color: #555555;
			}

			.right {
				display: flex;
				align-items: center;
				gap: 0 24rpx;

				.selectbox {
					width: 80%;
					height: 108rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					text-align: right;

					.addbox {
						display: flex;
						justify-content: flex-end;
						width: 100%;

						.addtext {
							width: 450rpx;
						}

						.imgbox {
							margin-left: 20rpx;

							// width: 60rpx;
							image {
								width: 8rpx;
								height: 16rpx;
							}
						}
					}

				}

				.text1 {
					color: #555555;
				}

				.text2 {
					color: #222222;
				}

				image {
					width: 8rpx;
					height: 16rpx;
				}

				input {
					text-align: end;
				}
			}
		}
	}

	// 
	.sex_box {
		width: 750rpx;
		height: 590rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;


		.title {
			width: 100%;
			height: 112rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #DBDBDB;
			padding: 0 30rpx;
			box-sizing: border-box;
			flex-shrink: 0;

			text {
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				line-height: 1em;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
			}
		}

		.content {
			height: 100%;

			.picker {
				width: 100%;
				height: 100%;

				.picker_item {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.btn {
			width: 690rpx;
			height: 84rpx;
			background: #FF8A9B;
			border-radius: 83rpx;
			margin: 0 30rpx 24rpx 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			flex-shrink: 0;
		}
	}

	.butbox {
		width: 750rpx;
		height: 106rpx;
		background: #f2f2f2;
		position: fixed;
		bottom: 0;

		>view {
			width: 690rpx;
			height: 86rpx;
			background: #FF8A9B;
			border-radius: 83rpx;
			text-align: center;
			line-height: 86rpx;
			font-size: 36rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			margin: 10rpx auto;
		}
	}
</style>